<template>
  <div class="contact-container">
    <Header @change-from-child="getContact"/>
    <a-list
      class="contact-list"
      item-layout="horizontal"
      :data-source="contacts"
    >
      <template #renderItem="{ item }">
        <a-list-item class="contact-item" @click="handleContactClick(item.chatNo)">
          <a-list-item-meta :description="item.name??''">
            <template #avatar>
              <a-avatar class="profile-avatar" :size="40">{{ item.name?.charAt(0) }}</a-avatar>
            </template>
            <template #title>
              <div class="name-wrapper">
                <span class="contact-name">{{ item.name??'' }}</span>
              </div>
            </template>
          </a-list-item-meta>
          <div>{{item.updateTime}}</div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import request from '@/util/request.js'

export default {
  components: { Header },
  data() {
    return {
      refreshing: false,
      contacts: [],
      userInfo: this.$store.state.userInfo
    }
  },
  mounted() {
    this.getContact()
  },
  methods: {
    getContact(){
      request.get("/chat/getListByToken?token="+this.userInfo.token).then(res=>{
        if (res.data.code===200){
          this.contacts=res.data.data
        }
      })
    },
    handleContactClick(chatNo) {
      this.$router.push({ path: '/chat', query: { chatNo } })
    }
  }
}
</script>

<style scoped>
.contact-container {
  height: calc(100vh - 60px);
  background: #EFEFEF;
  overflow-y: auto;
  padding-top: 50px;
}
.profile-avatar {
  background-color: #1890ff;
  border-radius: 20%;
}
.contact-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: #FFFFFF;
  transition: background 0.2s ease;
  border-bottom: 1px solid #E0E0E0;
}
.contact-item:hover {
  background: #F5F5F5;
}
.name-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: #333;
}
.contact-desc{
  font-size: 13px;
  color: #999999;
}
</style>
